<template>
  <el-card class="record-top10-user" shadow="never" v-loading="loading">
    <div class="card-title">
      <span>top10访问用户</span>
      <el-tooltip effect="dark" content="刷新数据" placement="top">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          class="refresh-button"
          plain
          circle
          @click="refreshData"
        ></el-button>
      </el-tooltip>
      <el-tooltip effect="dark" content="查看详情" placement="top">
        <el-button type="primary" icon="el-icon-arrow-right" plain circle @click="goDetail"></el-button>
      </el-tooltip>
    </div>
    <div class="top-box clearfix">
      <div class="top-item-box ">
        <el-row class="top-header">
          <el-col :span="2">排名</el-col>
          <el-col :span="14">用户名</el-col>
          <el-col :span="4" class="text-center">浏览量(PV)</el-col>
          <el-col :span="4" class="text-right">占比</el-col>
        </el-row>
        <el-row class="top-item" v-for="(item, index) in top5" :key="index">
          <el-col :span="2" class="text-num">{{ index + 1 }}</el-col>
          <el-col :span="14" class="text-ellipsis">{{ item.loginUname }}</el-col>
          <el-col :span="4" class="text-center">{{ item.visitNum }}</el-col>
          <el-col :span="4" class="text-right">{{ item.proportion }}</el-col>
        </el-row>
      </div>
      <div class="top-item-box">
        <el-row class="top-header">
          <el-col :span="2">排名</el-col>
          <el-col :span="14">用户名</el-col>
          <el-col :span="4" class="text-center">浏览量(PV)</el-col>
          <el-col :span="4" class="text-right">占比</el-col>
        </el-row>
        <el-row class="top-item" v-for="(item, index) in later5" :key="index">
          <el-col :span="2" class="text-num">{{ index + 6 }}</el-col>
          <el-col :span="14" class="text-ellipsis">{{ item.loginUname }}</el-col>
          <el-col :span="4" class="text-center">{{ item.visitNum }}</el-col>
          <el-col :span="4" class="text-right">{{ item.proportion }}</el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dataList: []
    }
  },
  computed: {
    top5() {
      let list = this.dataList.slice(0, 5)
      let i = list.length
      for (i; i < 5; i++) {
        list.push({})
      }
      return list
    },
    later5() {
      let list = this.dataList.slice(5, 10)
      let i = list.length
      for (i; i < 5; i++) {
        list.push({})
      }
      return list
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysOperateRecord/visitTop10Users'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        this.loading = false
        if (data && data.code === '0') {
          this.dataList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    refreshData() {
      this.$emit('refresh')
    },
    goDetail() {
      this.$blank('system-record-user')
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-record {
  .record-top10-user {
    float: left;
    height: 240px;
    width: 100%;
    .top-box {
      margin-top: 14px;
    }
    .top-item-box {
      float: left;
      width: 50%;
      border-right: 1px solid $border-color;
      &:first-child {
        padding-right: 30px;
      }
      &:last-child {
        padding-left: 30px;
        border-right: 0;
      }
      .top-header {
        font-size: 12px;
        color: #797979;
        margin-bottom: 10px;
      }
      .top-item {
        border-bottom: 1px solid $border-color;
        height: 30px;
        line-height: 30px;
        &:last-child {
          border-bottom: 0;
        }
      }
      .click-item {
        color: #409eff;
        cursor: pointer;
      }
      .text-ellipsis {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .text-num {
        padding-left: 8px;
      }
      .text-center {
        text-align: center;
      }
      .text-right {
        text-align: right;
      }
    }
  }
}
</style>
